<template>
  <div class="lianxiwomen-page">
    <div class="banner"></div>
    <div class="address">
      <div class="ad">
        <div class="ad-icon"></div>
        <div class="ad-text">dldflkdjfkjsdkfjkldflkdjfkjsdkfjkl</div>
        <div class="ad-text">dldflkdjfkjsdkfjkldflkdjfkjsdkfjkl</div>
      </div>
      <div class="ad">
        <div class="ad-icon"></div>
        <div class="ad-text">dldflkdjfkjsdkfjkldflkdjfkjsdkfjkl</div>
        <div class="ad-text">dldflkdjfkjsdkfjkldflkdjfkjsdkfjkl</div>
      </div>
      <div class="ad">
        <div class="ad-icon"></div>
        <div class="ad-text">dldflkdjfkjsdkfjkldflkdjfkjsdkfjkl</div>
        <div class="ad-text">dldflkdjfkjsdkfjkldflkdjfkjsdkfjkl</div>
      </div>
    </div>
    <div class="map">
      <div id="mapcontainer"></div>
    </div>
  </div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted } from 'vue'
import { getContant } from './service/index'

function initMap() {
  window._AMapSecurityConfig = {
    securityJsCode: '175491a13916e20d870dbdbba55b38cf'
  }
  AMapLoader.load({
    key: 'd146a683c7ce54520dfadf9ca2c5dea4', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      const map = new AMap.Map('mapcontainer', {
        //设置地图容器id
        viewMode: '3D', //是否为3D地图模式
        zoom: 13, //初始化地图级别
        center: [118.73, 32.21] //初始化地图中心点位置
      })
    })
    .catch((e) => {
      console.log(e)
    })
}



const queryPageInfo = async() => {
  const params = {
    sid:'123',
    name: 'aaa'
  }
  const res = await getContant(params)
  console.log(res);
}

onMounted(()=>{
  initMap()
  queryPageInfo()
})


</script>

<style scoped lang="scss">
.lianxiwomen-page {
  display: flex;
  flex-direction: column;
  // height: 90vh;
  overflow-y: scroll;
  .banner {
    width: 100%;
    height: 342px;
    border: 1px yellow solid;
  }
  .address {
    width: 100%;
    height: auto;
    // border: 1px red solid;
    display: flex;
    padding: 50px 150px;
    justify-content: space-between;
    .ad {
      border: 1px #eee solid;
      // height: 109px;
      width: 358px;
      border-radius: 5px;
      background-color: #fcfcfc;
      padding: 12px 28px;
      padding-bottom: 8px;
      // height: 40px;
      // width: 60px;

      .ad-icon {
        height: 36px;
        width: 36px;
        border: 1px #eeeeee solid;
        margin: 0px auto;
        margin-bottom: 8px;
      }

      .ad-text {
        border: 1px #eeeeee solid;
        text-align: center;
        width: 100%;
        margin-bottom: 4px;
      }
    }
  }

  .map {
    width: 100%;
    height: auto;
    padding: 30px 200px;
    #mapcontainer {
      width: 100%;
      height: 500px;
    }
  }
}
</style>
